<template>
  <div class="recording-page" :style="{ '--maxWidth': maxWidth, '--minWidth': minWidth }">
    <!-- 左侧内容区域 -->
    <div class="page-left" ref="leftPanel" :style="leftWidth">
      <slot name="left"></slot>
    </div>

    <!-- 可拖拽的分割线 -->
    <div class="divider-line" ref="dividerLine" @mousedown.stop="startDrag"></div>

    <!-- 右侧内容区域 -->
    <div class="page-right" ref="rightPanel">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  leftWidth: {
    type: String,
    default: '30%'
  },
  maxWidth: {
    type: String,
    default: '50%'
  },
  minWidth: {
    type: String,
    default: '20%'
  }
})

// 获取DOM元素引用
const leftPanel = ref<HTMLElement>()
const dividerLine = ref<HTMLElement>()
const rightPanel = ref<HTMLElement>()
// 左侧内容区域宽度
const leftWidth = computed(() => {
  return {
    width: props.leftWidth || '30%'
  }
})

// 拖拽状态
const isDragging = ref(false)
const startX = ref(0)
const startWidth = ref(0)
const emit = defineEmits(['update:leftWidth','change'])

// 开始拖拽
const startDrag = (e: MouseEvent) => {
  isDragging.value = true
  startX.value = e.clientX
  startWidth.value = leftPanel.value?.offsetWidth || 0

  // 禁用文本选择
  document.body.style.userSelect = 'none'
  document.body.style.cursor = 'col-resize'
}

// 拖拽过程中
const onDrag = (e: MouseEvent) => {
  if (!isDragging.value) return

  const dx = e.clientX - startX.value
  const newWidth = startWidth.value + dx

  // 设置最小和最大宽度限制
  const minWidth = 100
  const maxWidth = window.innerWidth
  console.log('看看', newWidth, minWidth, maxWidth)

  emit('update:leftWidth', `${newWidth}px`)
  emit('change', `${newWidth}px`)
}

// 停止拖拽
const stopDrag = () => {
  isDragging.value = false
  document.body.style.userSelect = ''
  document.body.style.cursor = ''
}

// 添加事件监听
onMounted(() => {
  document.addEventListener('mousemove', onDrag)
  document.addEventListener('mouseup', stopDrag)
})

// 移除事件监听
onUnmounted(() => {
  document.removeEventListener('mousemove', onDrag)
  document.removeEventListener('mouseup', stopDrag)
})
</script>

<style scoped lang="scss">
.recording-page {
  height: 100vh;
  width: 100vw;
  // background-color: #d9e4f9;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  padding: 5px;
}

.page-left {
  width: 30%; // 初始宽度40%
  min-width: var(--minWidth); // 最小宽度
  // max-width: calc(100% - 200px); // 最大宽度
  max-width: var(--maxWidth); // 最大宽度
  height: 100%;

  overflow: auto;
}
.auido-list {
  height: calc(100vh - 220px);
  padding: 10px;

  box-sizing: border-box;
}
.audio-utils {
  height: 180px;

  padding: 0 20px;
  box-sizing: border-box;
}

.page-right {
  flex: 1;
  // background-color: #fff;
  border-radius: 10px;
  // min-width: 200px; // 最小宽度限制
  overflow: auto;
}

/* 可拖拽的分割线 - 完全按照图片样式 */
.divider-line {
  width: 5px; // 整个可拖拽区域宽度
  height: 100%;
  cursor: col-resize;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  transition: background-color 0.2s ease;

  &:hover {
    .drag-handle {
      width: 3px;
    }
  }

  // 拖拽时的样式
  &:active,
  &.dragging {
    .drag-handle {
      width: 4px;
    }
  }
}
.null {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
